<template>
    <div>
        <div class="plan-flex plan-between" style="max-width: 1100px;min-width: 1080px">
            <div class="plan-flex plan-direction">
                <div style="margin-top: 20px">
                    <div class="plan-box-header plan-flex-bcenter" style="padding: 10px">
                        <span class="title-line">
                            外理结算对账
                        </span>
                        <div>
                            <el-button @click="dialogForm=true" v-if="power('TALLY_BILL_MONTHLIST:CALCALL')">月结账单结算</el-button>
                            <el-button @click="handleRouterPush({path: '/work/balance',name: '结算对账单'})">结算对账单
                            </el-button>
                        </div>
                    </div>
                    <div class="plan-box">
                        <z-month @handleMonth="v=>handleMonthSet(v,'balance')"
                                 :isClickMonth="true"
                                 @data="handleMonth"
                                 @month="handleBalanceMonth"
                                 ref="month"
                                 @setDate="setBalance"
                                 :getData="getMonth"></z-month>
                        <div id="line" @mouseenter="onChartClickLine" @mouseleave="offChartClickLine"
                             class="cash-style"></div>
                    </div>
                </div>
            </div>
            <div class="plan-flex plan-direction">
                <div style="margin-top: 20px">
                    <div class="plan-box-header plan-flex-bcenter" style="padding: 10px">
                        <span class="title-line">
                            外理现结查询
                        </span>
                        <div>
                            <el-button @click="handleRouterPush({path: '/work/cash',name: '现结查询'})">现结对账单</el-button>
                        </div>
                    </div>
                    <div class="plan-box">
                        <z-month @handleMonth="v=>handleMonth(v,'cash')"
                                 :isClickMonth="true"
                                 @data="handleCash"
                                 @month="getCashMonth"
                                 ref="cash"
                                 @setDate="setCash"
                                 :getData="getMonth"></z-month>
                        <div id="lineCash" @mouseenter="onChartClickLineCash" @mouseleave="offChartClickLineCash"
                             class="cash-style"></div>
                    </div>
                </div>
            </div>

        </div>
        <el-dialog title="月结账单结算" :visible.sync="dialogForm" width="400px">
            <el-form :inline="true" :model="form" ref="form" class="search-form mt-20"
                     label-width="120px">
                <el-row type="flex" justify="center">
                    <el-col :span="24">
                        <el-form-item label="结算月度：" prop="accountMonth">
                            <el-date-picker v-model="form.accountMonth" @change="handleSelectDate" type="month"
                                            value-format="yyyy-MM"
                                            placeholder="选择月">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="24">
                        <el-form-item label="发生日期：" prop="">
                            <div v-show="form.startFeeTime">{{ form.startFeeTime }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="24">
                        <el-form-item label="全部/单位计算：" prop="allUnit">
                            <el-radio v-model="form.allUnit" :label="true">全部计算</el-radio>
                            <el-radio v-model="form.allUnit" :label="false">指定单位计算</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="24" v-if="!form.allUnit">
                        <el-form-item label="指定单位结算：" prop="">
                            <search-custom @selectName="v=>form.accountUnit=v" :isShipAgent="true"></search-custom>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogForm = false">取 消</el-button>
                <el-button type="primary" @click="handleComputed(form)" :loading="$store.getters.loadingBtn">计 算
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import zMonth from '@/components/calendar/z-month'
    import { getBalanceMonthCash, getBalanceMonth } from "@/api/balance/balance";
    import searchCustom from '@/components/autocomplete/autoSearchCustom'
    import { monthBalance, getAccountRange } from "@/api/balance/balance";
    import { getSystemParameterList } from "@/api/system/systemParameter";
    import { getLocalTime } from "@/utils/dateFormat";

    function getLastDay(year, month) {
        var new_year = year;  //取当前的年份
        var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
        if (month > 12)      //如果当前大于12月，则年份转到下一年
        {
            new_month -= 12;    //月份减
            new_year++;      //年份增
        }
        var new_date = new Date(new_year, new_month, 1);        //取当年当月中的第一天
        return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate();//获取当月最后一天日期
    }

    // 引入基本模板
    let echarts = require("echarts/lib/echarts");
    import "echarts/theme/macarons";
    // 引入提示框和title组件
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/title");
    require("echarts/lib/chart/line");
    export default {
        name: "feeIndex",
        components: {
            zMonth, searchCustom
        },
        data() {
            return {
                getMonth: getBalanceMonth,
                getCash: getBalanceMonthCash,
                line: '',
                lineCash: '',
                dialogForm: false,
                form: this.clearForm(),
                setMonth: new Date().getMonth() + 1,
                setYear: new Date().getFullYear(),
                setDay: new Date().getDate(),
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.$refs.month.search = 'search_EQ_type'
                this.$refs.month.keyWord = 'M'
                this.$refs.month.getMonthDay()
                this.$refs.cash.search = 'search_EQ_type'
                this.$refs.cash.keyWord = 'C'
                this.$refs.cash.getMonthDay()
            },
            handleComputed(item) {
                let data = {
                    accountMonth: item.accountMonth,
                    allUnit: item.allUnit,
                    accountUnit: item.accountUnit,
                }
                monthBalance(data).then(res => {
                    this.$message({ message: '计算成功!', type: 'success' })
                    this.dialogForm = false
                    this.loadData()
                })
            },
            handleMonth(item) {
                let data = []
                let title = []
                for (let i = 0; i < item.length; i++) {
                    const el = item[i]
                    data.push(el.jobNum)
                    title.push(el.month)
                }
                this.line = echarts.init(
                    document.getElementById("line"),
                    "macarons"
                )
                this.line.setOption({
                    title: {
                        text: '月结金额',
                        x:'center',
                        top:20
                    },
                    legend: {
                        data:['月结金额'],
                        right: 10,
                        top:20,
                        orient: 'vertical',
                        // y:'center',
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: title
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name:'月结金额',
                        data: data,
                        type: 'line',
                        smooth: false
                    }]
                })
            },
            getCashMonth(val) {
                this.$nextTick(()=>{
                    this.handleRouterPush({path: '/work/cash',name: '现结查询'})
                })
            },
            handleBalanceMonth(val) {
                this.$nextTick(()=> {
                    this.handleRouterPush({ path: '/work/balance', name: '结算对账单' })
                })
            },
            handleCash(item) {
                let data = []
                let title = []
                for (let i = 0; i < item.length; i++) {
                    const el = item[i]
                    data.push(el.jobNum)
                    title.push(el.month)
                }
                this.lineCash = echarts.init(
                    document.getElementById("lineCash"),
                    "macarons"
                )
                this.lineCash.setOption({
                    title: {
                        text: '现结金额',
                        x:'center',
                        top:20
                    },
                    legend: {
                        data:['现结金额'],
                        right: 10,
                        top:20,
                        orient: 'vertical',
                        // y:'center',
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: title
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name:'现结金额',
                        data: data,
                        type: 'line',
                        smooth: false
                    }]
                })
            },
            onChartClickLine() {
                this.line.on('click', (param) => {
                    const { seriesName, name } = param
                    // this.condition.search_LIKE_portName = seriesName
                    // this.getTotal();
                })
            },
            offChartClickLine() {
                this.$nextTick(() => {
                    this.line.off('click')
                })
            },
            onChartClickLineCash() {
                this.lineCash.on('click', (param) => {
                    const { seriesName, name } = param
                    // this.condition.search_LIKE_portName = seriesName
                    // this.getTotal();
                })
            },
            offChartClickLineCash() {
                this.$nextTick(() => {
                    this.lineCash.off('click')
                })
            },
            handleSelectDate(val) {
                getAccountRange(val).then(res => {
                    this.form.startFeeTime = res.data
                })

            },
            handleRouterPush(val) {
                // console.log(val)
                this.$store.commit("ADD_CACHED_VIEWS", val);
                this.$router.push(val.path);
            },
            handleMonthSet() {

            },
            setBalance(val){
                let date = val.split('-')
                let year = date[0]
                let month = date[1]
                let day = date[2]
                let lastDay = getLastDay(year, month)
                sessionStorage.setItem('balanceIndexFirst',val)
                sessionStorage.setItem('balanceIndexLast',year+'-'+month+'-'+lastDay)
            },
            setCash(val){
                console.log(val)
                let date = val.split('-')
                let year = date[0]
                let month = date[1]
                let day = date[2]
                let lastDay = getLastDay(year, month)
                sessionStorage.setItem('cashIndexFirst',val)
                sessionStorage.setItem('cashIndexLast',year+'-'+month+'-'+lastDay)
            },
            clearForm() {
                return {
                    allUnit: true,
                    startFeeTime: '',
                    endFeeTime: '',
                    accountMonth: '',
                    accountUnit: '',
                }
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.form = this.clearForm()
                }
            }
        },
    }
</script>

<style scoped>
    .plan-box {
        padding: 20px;
        border: 1px solid #dddddd;
    }

    .plan-box-header {
        border: 1px solid #dddddd;
        border-bottom: none;
    }

    .plan-box-header p {
        padding: 10px;
    }

    .plan-flex {
        display: flex;
    }

    .plan-flex-bcenter {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .plan-between {
        justify-content: space-between;
    }

    .plan-direction {
        flex-direction: column;
    }

    .cash-style {
        height: 400px;
        width: 100%;
    }
</style>
